<template>
	<view :class="list.length>0?'bg':'bg-1'" class="productsLists">
		<view class="lists" v-if="list.length>0">
			<template>
				<view @click="toDetail(item.goods_id)" class="goodsbox" v-for="(item,index) in list" :key="index">
					<image :src="item.goods_image" class="goodsimg" mode=""></image>
					<view class="goodslist">
						<view class="goods3">
							<view class="goods4">￥{{item.goods_price}}</view>
							<view class="goods5">
								买过<text class="goods4">{{item.buy_num}}</text>次
							</view>
						</view>
						<view class="ms">{{item.goods_name}}</view>
						<view class="btn-box">
							<view class="btn1" @click.stop="add(item)">
								加入购物车
							</view>
							<view class="btn2" @click.stop="toBuy(item)">
								立即购买
							</view>
						</view>
					</view>
				</view>
			</template>
		</view>
	
		<view class="" v-if="list.length<=0">
			<image :src="`${picUrl}/InfoNull.png`" style="width: 750rpx;height: 800rpx;" mode="widthFix"></image>
		</view>
		<go-top :isShow='isShow'></go-top>
	</view>
</template>

<script>
	import goTop from '@/components/go-top/go-top.vue'
	export default {
		components: {
			goTop
		},
		data() {
			return {
				list:[],
				isShow:false,
				isArrange:true,
				curpage:1,
				hasmore: false,
				num: 1, //数量
				type: 1, //type:1为普通购买，2为拼团购买，3为砍价订单 6秒杀
				SpellGroup_sn: "",
			}
		},
		onLoad() {
			this.getList()
		},
		onReachBottom() {
			if (this.hasmore) {
				this.curpage++
				this.getList()
			} else {
				uni.showToast({
					title: '没有更多数据了',
					icon: 'none'
				})
			}
		},
		onPageScroll(res) {
			if (res.scrollTop > 200) {
				this.isShow = true
			} else {
				this.isShow = false
			}
		},
		methods: {
			add(row){
				var that = this;
				that.$util.request({
					url: '/mobile/index.php?act=member_cart&op=cart_add',
					method: 'POST',
					data: {
						goods_id: row.goods_id,
						quantity: that.num,
						goods_type: that.goods_type
					}
				}).then(res => {
					if (res.datas == '1') {
						uni.showToast({
							title: '加入成功！'
						})
					}
				})
			},
			toBuy(row) {
				if (!uni.getStorageSync("key")) {
					uni.navigateTo({
						url: "/mainA/login/login"
					})
					return
				}
				//  is_virtual商品类型
				uni.navigateTo({
					url: '/mall/order/confirm?cart_id=' + row.goods_id + '|' + this
						.num + '&ifcart=0' + '&order_type=' + this.type + "&SpellGroup_sn=" + this
						.SpellGroup_sn
				})
			},
			toDetail(id) {
				uni.navigateTo({
					url: "/mall/goods/info?goods_id=" + id
			
				})
			},
			getList(){
				var that = this;
				that.$util.request({
					url: '/mobile/index.php?act=member_order&op=goods',
					method: 'get',
					data: {curpage: that.curpage},
				}).then(function(res) {
					if (res.error_code == 0) {
							that.hasmore = res.datas.paged.hasmore
						if(res.datas.list){
							that.list= that.list.concat(res.datas.list);
						}else{
							that.list=[]
						}

						if (that.list.length == 0) {
							uni.showToast({
								title: "没有相关商品",
								icon: "none"
							})
							return
						}
					} else {
						uni.showToast({
							title: res.message,
							icon: "none"
						})
					}
				})
			}
			
		}
	}
</script>

<style lang="scss" scoped>
page {
		background-color: #F5F5F5;
	}
	.bg{
		background-color: #efeff4;
	}
	.bg-1{
		background-color: #fff;
		height: 100%;
	}
	.lists {
		background-color: #F5F5F5;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		flex-wrap: wrap;
		padding: 30upx;
		margin-bottom: constant(safe-area-inset-bottom);
		/*兼容 IOS<11.2*/
		margin-bottom: env(safe-area-inset-bottom)
		/*兼容 IOS>11.2*/
	}
	
	.goodsbox {
		width: 100%;
		background-color: #fff;
		display: flex;
		position: relative;
		left: 0;
		border-radius: 20rpx;
		margin-bottom: 20rpx;
		padding: 20rpx;
	}
	.goodsimg {
		width: 260rpx;
		height: 260rpx;
		border-radius: 20rpx;
	}
	
	.goodslist {
		flex: 1;
		padding: 10rpx 20rpx 20rpx;
		display: flex;
		flex-direction: column;
	}
	.ms {
		min-height: 64upx;
		text-align: left;
		line-height: 35upx;
	
		font-size: 28rpx;
		font-family: Source Han Sans CN-Bold, Source Han Sans CN;
		font-weight: bold;
		color: #333333;
	
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}
	
	.goods4 {
		display: flex;
		color: #ff4300;
		font-size: 30rpx;
		font-weight: 700;
	}
	
	.goods3 {
		display: flex;
		justify-content: space-between;
		font-size: 28rpx;
		color: #333;
		margin-bottom: 20rpx;
	}
	.goods5 {
		display: flex;
		color: #333;
	}
	.btn-box{
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		margin-top:10rpx;
		view{
			flex: 1;
			height: 60rpx;
			    margin-top: 20rpx;
			background-color: #FF9A01;
			color: #fff;
			font-size: 26rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.btn2{
			background-color: #E6442F;
			margin-left: 20rpx;
		}
	}
</style>
